<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ship Simulator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Ship Information Table</h1>
        <div class="table-controls">
            <button onclick="addRow()">Add Row</button>
            <button onclick="deleteSelectedRows()">Delete Selected Rows</button>
            <button onclick="addSimulatedShip()">Add Simulated Ship</button>
        </div>
        <div class="table-container">
            <table id="shipTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" onclick="toggleAllRows(this)"></th>
                        <th>Target ID</th>
                        <th>Ship Name</th>
                        <th>MMSI</th>
                        <th>State</th>
                        <th>Rotation</th>
                        <th>IMO</th>
                        <th>Call Sign</th>
                        <th>Speed</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Course (Ship)</th>
                        <th>Course (Land)</th>
                        <th>Length</th>
                        <th>Width</th>
                        <th>Ship Type</th>
                        <th>ETA</th>
                        <th>Draft</th>
                        <th>AIS Type</th>
                        <th>Destination</th>
                        <th>Icon Type</th>
                        <th>Set Type</th>
                        <th>Update Time</th>
                        <th>Anchor Lat</th>
                        <th>Anchor Lon</th>
                        <th>Anchor Time</th>
                        <th>Radar ID</th>
                        <th>Radar Speed</th>
                        <th>Radar Course</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="simulation-controls">
            <button id="simulationButton" onclick="toggleSimulation()">Start Simulation</button>
            <span id="simulationStatus">Status: Stopped</span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
